/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
  <view class="assemble" v-if="pageShow">
    <view class="assemble-header">
      <image :src="info.goodsinfo.thumb_url" />
      <view class="assemble-header__right">
        <h2>{{ info.goodsinfo.goods_name }}</h2>
        <i>{{ info.goodsinfo.goods_attr_str }}</i>
        <u-tag
          plain
          type="warning"
          :text="info.goodsinfo.pin_num + $t('人团')"
          size="mini"
        ></u-tag>
        <p class="price">
          <span class="rmbSymbol">¥</span>{{ info.goodsinfo.price }}
        </p>
      </view>
    </view>
    <view class="assemble-content">
      <view class="assemble-content__user">
        <view
          class="userlist"
          v-for="(item, index) in info.member_assem"
          :key="index"
        >
          <image :src="item.headimgurl" />
          <view class="assemble-content-username" v-if="item.pin_type === 1"
            >{{ $t("团长") }}:{{ info.member_assem[0].user_name }}</view
          >
        </view>
        <u-tag plain type="success" shape="circle" :text="info.pininfo"></u-tag>
      </view>
      <view v-if="info.zhuangtai === 1">
        <p class="tip-content" v-if="info.zhuangtai === 1">
          {{ info.tuan_name }}
        </p>
        <view class="countdown">
          <uni-countdown
            :day="day"
            :hour="hours"
            :second="second"
            splitor-color="#FF7900"
            background-color="#FF8300"
            border-color="#FF8300"
            color="#fff"
            :minute="minute"
          >
          </uni-countdown>
          <view class="assemble-btn" @click="toIntive">{{
            $t("邀请好友")
          }}</view>
        </view>
      </view>
      <view v-if="info.zhuangtai === 2">
        <p v-if="info.zhuangtai === 1">{{ info.tuan_name }}</p>
        <view
          class="assemble-btn"
          @click="
            getnav('/pagesC/order/orderDetails?order_num=' + info.order_num)
          "
        >
          {{ $t("查看订单") }}</view
        >
      </view>
      <view v-if="info.zhuangtai === 3">
        <p v-if="info.zhuangtai === 1">{{ info.tuan_name }}</p>
        <view
          class="assemble-btn"
          @click="
            getnav('/pagesC/order/orderDetails?order_num=' + info.order_num)
          "
        >
          {{ $t("查看订单") }}</view
        >
      </view>
      <view class="fight-group__step--list">
        <view class="fight-group__step--item step-item__active">
          <image src="../../static/images/img/fight-group.png" />
          <text>{{ $t("发起拼团") }}</text>
        </view>
        <view
          class="fight-group__step--item"
          :class="[info.zhuangtai > 0 ? 'step-item__active' : '']"
        >
          <image
            :src="
              info.zhuangtai > 0
                ? '../../static/images/img/fight-group.png'
                : '../../static/images/img/fight-group-disable.png'
            "
          />
          <text>{{ $t("邀请好友参团") }}</text>
        </view>
        <view
          class="fight-group__step--item"
          :class="[info.zhuangtai == 2 ? 'step-item__active' : '']"
        >
          <image
            :src="
              info.zhuangtai == 2
                ? '../../static/images/img/fight-group.png'
                : '../../static/images/img/fight-group-disable.png'
            "
          />
          <text>{{ $t("拼团成功") }}</text>
        </view>
      </view>
    </view>

    <u-popup
      v-model="isShowInvite"
      mode="center"
      width="80%"
      border-radius="12"
    >
      <div class="inviteWrap">
        <!--  #ifndef H5 -->
        <button open-type="share" @click="shareFriends" class="inviteWrap-item">
          <u-icon name="weixin-circle-fill" color="#1BD76D" size="68"></u-icon>
        </button>
        <!--  #endif -->
        <u-icon
          class="inviteWrap-item"
          name="attach"
          color="#333"
          size="68"
          @click="copyUrl"
        ></u-icon>
      </div>
    </u-popup>
  </view>
</template>

<script>
import uniCountdown from "../components/uni-countdown.vue";

export default {
  data() {
    return {
      info: {},
      goodsinfo: {},
      userList: [],
      pageShow: false,
      hours: 0,
      day: 0,
      minute: 0,
      second: 0,
      order_num: "",
      isShowInvite: false,
    };
  },

  components: {
    uniCountdown,
  },

  onLoad(option) {
    this.order_num = option.order_num;
    this.getDetail();
  },
  onBackPress(option) {
	if(option.from == 'backbutton'){
		this.$u.route({url:'/pagesC/goods/goodsDetails',params:{id:this.info.goodsinfo.goods_id,source:"assemble"}})
	}
	return true;
  },

  methods: {
    getDetail() {
      this.$http
        .getPinTuanDetail({
          order_num: this.order_num,
        })
        .then((res) => {
          if (res.status === 200) {
            this.formatTime(res.data.timeout - res.data.nowtime);
            this.info = res.data;

            uni.setNavigationBarTitle({
              title: res.data.pininfo,
            });
            this.pageShow = true;
          }
        });
    },
    shareFriends() {
      const BASEURL = uni.getStorageSync("baseUrl");
      const GOODSINFO = this.info.goodsinfo;
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 0,
        href: `${BASEURL}h5/#/pagesC/goods/goodsDetails?id=${GOODSINFO.goods_id}&pin_id=${this.info.pin_id}`,
        title: `${this.$t("参与")}${
          this.info.member_assem[0].user_name
        }${this.$t("发起的")}${GOODSINFO.goods_name}${this.$t("团购")}`,
        summary: this.$t("拼团邀请"),
        imageUrl: GOODSINFO.thumb_url,
        miniProgram: {
          id: "gh_7ad167ff21c5",
          path: `pagesC/goods/goodsDetails?id=${GOODSINFO.goods_id}&pin_id=${this.info.pin_id}`,
          type: 0,
          webUrl: `${BASEURL}h5/#/pagesC/goods/goodsDetails?id=${GOODSINFO.goods_id}&pin_id=${this.info.pin_id}`,
        },
        success: (res) => {
          console.log("success:" + JSON.stringify(res));
          this.$toast(this.$t("分享成功"));
        },
        fail: function (err) {
          console.log("fail:" + JSON.stringify(err));
        },
      });
    },
    copyUrl() {
      const BASEURL = uni.getStorageSync("baseUrl");
      const GOODSINFO = this.info.goodsinfo;
      $utils.copy(
        `${BASEURL}h5/#/pagesC/goods/goodsDetails?id=${GOODSINFO.goods_id}&pin_id=${this.info.pin_id}`
      );
      this.isShowInvite = false;
    },

    toIntive() {
      this.isShowInvite = true;
      // this.getnav(`/pagesC/homeSon/invite?pin_id=${this.info.pin_id}&tuan_id=${this.info.tuan_id}`)
    },

    formatTime(time) {
      let day = 0;
      let hours = 0;
      let minute = 0;
      let second = 0;
      if (time > 60 * 60 * 24) {
        day = Math.floor(time / (60 * 60 * 24));
      }

      if (time - day * 60 * 60 * 24 > 60 * 60) {
        hours = Math.floor((time - day * 60 * 60 * 24) / (60 * 60));
      }

      if (time - day * 60 * 60 * 24 - hours * 60 * 60 > 60) {
        minute = Math.floor((time - day * 60 * 60 * 24 - hours * 60 * 60) / 60);
      }

      if (time - day * 60 * 60 * 24 - hours * 60 * 60 - minute * 60 > 0) {
        second = time - day * 60 * 60 * 24 - hours * 60 * 60 - minute * 60;
      }
      this.day = day;
      this.hours = hours;
      this.minute = minute;
      this.second = second;
    },
  },
};
</script>

<style lang="scss" scoped>
page,
.assemble {
  height: 100%;
  background: #fff;
}

.step-item__active {
  color: #fa3f3f !important;
}

.assemble-header {
  display: flex;
  align-items: center;
  height: 300upx;
  padding: 0 64upx 0 26upx;
  border-bottom: 26upx solid #f4f4f4;
  background: #fff;

  image {
    width: 210upx;
    height: 210upx;
    margin-right: 30upx;
    border-radius: 10upx;
  }

  .assemble-header__right--bottom {
    padding-top: 10upx;

    .price {
      font-size: 32upx;
      font-weight: 600;
      color: #f7544e;
    }

    span {
      padding-right: 12upx;
      color: #f7544e;
      font-size: 30upx;
    }

    i {
      font-size: 24upx;
      font-style: normal;
      color: #999999;
      text-decoration: line-throug;
    }
  }

  .assemble-header__right {
    flex: 1;

    & > span {
      height: 34upx;
      line-height: 34upx;
      margin-bottom: 34upx;
      padding: 0 10upx;
      font-size: 24upx;
      color: #e46800;
      border-radius: 4upx;
      border: 1upx solid rgba(229, 109, 10, 1);
    }

    i {
      display: block;
      margin-bottom: 10upx;
      color: #999;
      font-size: 24upx;
    }

    h2 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      color: #333;
      font-size: 28upx;
      line-height: 1.4;
      margin-bottom: 8upx;
    }
  }
}

.assemble-btn {
  width: 578upx;
  height: 88upx;
  line-height: 88upx;
  margin: 58upx auto 85upx auto;
  text-align: center;
  font-size: 30upx;
  color: #fff;
  background: rgba(247, 84, 78, 1);
  border-radius: 47upx;
}

.assemble-content {
  padding-top: 40upx;
  &-username {
    font-size: 36upx;
    margin-bottom: 18upx;
    font-weight: 500;
    color: #333;
  }
  .tip-content {
    text-align: center;
    margin-bottom: 20upx;
    color: #666;
  }

  & > p {
    color: #999;
    font-size: 28upx;
    text-align: center;
    margin-bottom: 11upx;
  }

  .assemble-content__user {
    margin-bottom: 27upx;
    text-align: center;

    image {
      width: 104upx;
      height: 104upx;
      margin-left: -22upx;
      border-radius: 50%;
    }
  }

  .countdown {
    text-align: center;
  }
}

.fight-group__step--list {
  display: flex;

  .step-item__active {
    color: #ff8300 !important;
  }

  .fight-group__step--item {
    flex: 1;
    color: #999999;
    font-size: 24upx;
    text-align: center;

    &:last-child image::after {
      display: none;
    }

    image {
      position: relative;
      z-index: 11;
      width: 40upx;
      height: 40upx;
      overflow: inherit !important;
      margin-bottom: 24upx;

      &::after {
        position: absolute;
        left: 40upx;
        top: 50%;
        width: 239upx;
        height: 2upx;
        background: #e8e8e8;
        content: "";
        transform: translateY(-50%);
      }
    }

    text {
      display: block;
    }
  }
}

.inviteWrap {
  padding: 30upx;
  display: flex;
  justify-content: flex-start;
  &-item {
    background: transparent;
    width: 90upx;
    height: 90upx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
  }
}
/deep/ button::after {
  border: none;
}
</style>
